<template>
    <div class="test">
        拖拽：<el-switch v-model="schema.properties.upload.ui.drag"></el-switch>
        拖拽：
        <el-select v-model="schema.properties.upload.ui.listType">
            <el-option label="text" value="text"></el-option>
            <el-option label="picture" value="picture"></el-option>
            <el-option label="picture-card" value="picture-card"></el-option>
        </el-select>
        <!-- <VoSchemaForm :model="model" :schema="schema" @change="formChange"></VoSchemaForm> -->
        <div style="margin-top: 20px;"></div>
        <el-button class="buttom" type="primary" :loading="loading1" @click="getAliPay">阿里</el-button>
        <el-button class="buttom" type="primary" :loading="loading2" @click="getWxpay">微信</el-button>
        <p>
            <img :src="img1" alt="" width="200px" height="200px">
            <img :src="img2" alt="" width="200px" height="200px" style="margin-left: 40px;">
        </p>
        <div v-html="aliPayForm"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    upload: {
                        label: '上传',
                        widget: 'upload',
                        ui: {
                            action: 'https://jsonplaceholder.typicode.com/posts/',
                            drag: false,
                            listType: 'text'
                        }
                    }
                }
            },
            img1: null,
            img2: null,
            loading1: false,
            loading2: false,
            aliPayForm: null
        }
    },
    methods: {
        getAliPay() {
            this.loading1 = true;
            this.$http.post('/api/pay/alipayQrcode', {
                type: 1
            }, {
                responseType: 'blob'
            }).then(res => {
                this.aliPayForm = res
                // const blob = new Blob([res], { type: 'image/jpeg' })
                // this.img1 = URL.createObjectURL(blob)
                this.loading1 = false;
                this.$nextTick(() => {
                    document.forms[0].submit()
                })
            }).catch(() => {
                this.loading1 = false;
            })
        },
        getWxpay() {
            this.loading2 = true;
            this.$http.post('/api/pay/wxpayPrecreate', {
                type: 1
            }, {
                responseType: 'blob'
            }).then(res => {
                const blob = new Blob([res], { type: 'image/jpeg' })
                this.img2 = URL.createObjectURL(blob)
                this.loading2 = false;
            }).catch(() => {
                this.loading2 = false;
            })
        },
        formChange(e) {
            console.log(e);
        }
    }
}
</script>

<style scoped>
.test{
    text-align: center;
    padding: 20px;
    margin: auto;
}
p{
    margin-top: 20px;
}
</style>
